<template>
  <div class="container">
    <div class="loginBox roundy-20 shadow">
        <div class="title">
          <div class="fontSize-20" style="color: rgb(0, 0, 167); font-weight: bold;">
            <i>远程终端系统</i>
          </div>
          <div class="fontSize-30 margin-15">登录</div>
          <div class="fontSize-20 margin-15">使用您的 User 账号</div>
        </div>
        
        <div class="inputArea">
          <login-input class="divMiddle" type="text" title="请输入您的电子邮箱地址" v-model="input.userEmail"/>
          <login-input class="divMiddle margin-30" type="password" title="请输入您的密码" v-model="input.password"/>
          <login-input 
            class="divMiddle margin-30" 
            type="text" 
            title="请输入验证码" 
            v-model="input.captcha"
          />
          <canvas class="pointer" id="captcha" @click="drawCaptcha()"></canvas>
        </div>
        
        <span class="toRegisterBtn pointer cantSelect" @click="goRegister">创建账号</span>

        <login-button class="rightFloat" style="margin-right: 50px;" title="登录" @click="login"/>

    </div>
  </div>
</template>

<script>
import LoginInput from '../Others/LoginInput.vue'
import LoginButton from '../Others/LoginButton.vue';
import request from '@/utils/request';


export default {
  name: 'LoginPage',
  components: {
    LoginInput,
    LoginButton,
  },
  data(){
    return {
      input: {
        userEmail: '',
        password: '',
        captcha: '',
      },
      captcha: 'SA26',
      currentUser: {},
      letters: '23456789abcdefghijkmnpqrstuvwxyzABCDEFGHJKLNMPQRSTUVWXYZ',
      colorLetters: '1234567890abcdef'
    }
  },
  methods:{
    goRegister(){
      this.$router.push('/register')
    },
    login()
    {
      /* 优先判断验证码 */
      if(this.input.captcha.trim() == ''){
        this.$message({
          message: '请输入验证码',
          type: 'error'
        });
        return
      }else if(this.captcha.toLowerCase() != this.input.captcha.toLowerCase()){
        this.$message({
          message: '验证码错误',
          type: 'error'
        });
        this.drawCaptcha()
        this.input.captcha = ''
        return
      }

      request.post("/api/start/login", this.input).then(res => {
        if (res.code === 200) {
          this.$message({
            message: '登录成功',
            type: 'success'
          });
          console.log(res.data)
          this.$router.push('/user/info');
          this.currentUser = res.data;
          
          this.$store.dispatch("login", res.data);


          /* 成功登录改为在线状态 */
          request.post("/api/start/edit/state", {userState: 0, userId: res.data.userId}).then(
            res => {
              if (res.code === 200) {
                /* this.$message({
                  message: '操作成功',
                  type: 'success'
                }); */
              } else {
                this.$message({
                  message: res.msg,
                  type: 'error'
                });
                this.drawCaptcha()
              }
            },
            error =>{ 
              console.log(error.message); 
            }
          )
    
          
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          });
          this.drawCaptcha()
        }
      },
      error =>{ 
        console.log(error.message); 
        this.$message({
          message: error.message,
          type: 'error'
        });
      })
    },
    drawCaptcha(){
      /* 随机生成验证码 */
      this.captcha = ''
      for(var i = 0; i < 4; i++){
        this.captcha += this.letters[Math.floor(Math.random()*this.letters.length)]
      }
      /* 根据验证码绘制图像验证码 */
      var ctx = document.querySelector("#captcha").getContext("2d")
      /* 清空画布 */
      ctx.clearRect(0, 0, 400, 1000);
      /* 干扰线绘制 */
      ctx.beginPath();
      ctx.moveTo(0, Math.random()*200);
      ctx.lineTo(1000, 75);
      ctx.lineTo(1000, Math.random()*200);
      ctx.fill();
      ctx.beginPath();
      ctx.moveTo(0, Math.random()*200);
      ctx.lineTo(1000, 75);
      ctx.lineTo(1000, Math.random()*200);
      ctx.fill();

      for(var j = 0; j < this.captcha.length; j++){
        ctx.font = Math.floor(Math.random()*40 + 100) +"px Georgia";
        ctx.strokeStyle = "black"
        /* 随机颜色生成 */
        var color = '#'
        for(var n = 0; n < 6; n++)
          color += this.colorLetters[Math.floor(Math.random()*this.colorLetters.length)]
        ctx.fillStyle = color

        ctx.strokeText(this.captcha[j], 70*j, 120 + Math.floor(Math.random()*40 - 20));
        ctx.fillText(this.captcha[j], 70*j, 120 + Math.floor(Math.random()*40 - 20));
      }
      
    }
  },
  mounted(){
    this.drawCaptcha()
  }
}
</script>

<style scoped>
canvas {
  margin-top: -20px;
  margin-bottom: 20px;
  height: 40px;
  width: 100px;
  background-color: rgb(211, 211, 211);
  border-radius: 10%;
}

.inputArea {
  text-align: center;
}

.left {
  height: 100vh;
  width: 50%;
  text-align: center;
  line-height: 100vh;
}

.right {
  height: 100vh;
  width: 50%;
  text-align: center;
  line-height: 100vh;
}

.loginBox {
  height: 600px;
  width: 500px;
  margin: 0px auto;
  margin-top: 10%;
  /* border: 1px solid rgb(204, 204, 204); */
  background-color: white;
}

.shadow {
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
}

.title {
  text-align: center;
  padding: 30px;
}

.text-1 {
  font-size: 20px;
}

.toRegisterBtn {
  color: rgb(94, 94, 194);
  font-size: 18px;
  margin-left: 60px;
}
</style>
